<script>
  export default {
    name: 'imageExport',
    props: {
      is_derive: {
        type: Boolean,
        default: false,
      },
    },
    created() {

    },
    methods: {
      // 树谱导出
      async exportTree(data) {
        // #ifdef H5
        let oA = document.createElement('a');
        oA.download = '树谱.png'; // 设置下载的文件名，默认是'下载'
        oA.href = data;
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
        uni.$emit('exportImage');
        // #endif
        // #ifdef APP-PLUS
        await this.saveBaseImgFile(data)
        uni.$emit('exportImage');
        // #endif
      },
	  // #ifdef APP-PLUS
	  saveBaseImgFile(base64) {  
	    return new Promise((resolve, reject) => {
        const bitmap = new plus.nativeObj.Bitmap('base64')
        bitmap.loadBase64Data(base64, () => {
            const url = '_doc/' + new Date().getTime() + '.png'
            bitmap.save(
              url,
              {
                overwrite: true, // 是否覆盖
                quality: 'quality'  // 图片清晰度
              },
              (i) => {
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: () => {
                    console.log('图片保存成功')
                    bitmap.clear()
                    resolve(true)
                  }
                })
              },
              (e) => {
                console.log('图片保存失败')
                bitmap.clear()
                reject(true)
              }
            )
          },
          (e) => {
            console.log('图片保存失败')
            bitmap.clear()
            reject(true)
          }
        )
      })
	  }  
	  // #endif
    },
  };
</script>
<script module="renderScript" lang="renderjs">
  import html2canvas from 'html2canvas'
  import { base64ToPath } from 'image-tools';
  export default {
    data(){
      return {
        map: null,
        linePath: []
      }
    },
    mounted(){
      console.log('renderjs');
    },
    methods:{
      receiveInfo(newValue, oldValue, ownerVm, vm){
        console.log(newValue, oldValue, ownerVm, vm);
        if(!newValue){
          return
        }
        setTimeout(()=>{
          // 需要生成图片内容的 dom 节点
          const dom = document.getElementById('recursiveList')
          html2canvas(dom,{
            scrollY:0,
            scrollX:0,
            useCORS: true, // 跨域相关属性
            allowTaint: true, // 跨域相关属性
            imageTimeout:0,
            scale:1.5,
            logging:true
          }).then(async canvas=>{
            console.log('生成成功',canvas);
            console.log('base64',canvas.toDataURL('image/png'));
            canvas.style.transform = 'scale(0.1)'
            console.log('生成成功',canvas);
            const image = await base64ToPath(canvas.toDataURL('image/png'))
            // html2canvas 生成成功的图片链接需要转成 base64位的url
            ownerVm.callMethod('exportTree', image)
          }).catch(err=>{
            console.log("生成图片失败=>",err);
          })
        },1000)
      },
      appReceiveInfo(newValue, oldValue, ownerVm, vm){
        console.log(newValue, oldValue, ownerVm, vm);
        if(!newValue){
          return
        }
        setTimeout(()=>{
          // 需要生成图片内容的 dom 节点
          const dom = document.getElementById('recursiveList')
          html2canvas(dom,{
            scrollY:0,
            scrollX:0,
            useCORS: true, // 跨域相关属性
            allowTaint: true, // 跨域相关属性
            imageTimeout:0,
            scale:window.devicePixelRatio < 1 ? window.devicePixelRatio : 5
          }).then(async canvas=>{
            console.log('生成成功');
            // html2canvas 生成成功的图片链接需要转成 base64位的url
            ownerVm.callMethod('exportTree', canvas.toDataURL('image/png'))
          }).catch(err=>{
            console.log("生成图片失败=>",err);
          })
        },1000)
      }
    }
  };
</script>

<template>
  <!-- #ifdef H5 -->
  <view :is_derive="is_derive"
        :change:is_derive="renderScript.receiveInfo">
  </view>
  <!-- #endif -->
  <!-- #ifdef APP-PLUS -->
  <view :is_derive="is_derive"
        :change:is_derive="renderScript.appReceiveInfo"></view>
  <!-- #endif -->
</template>

<style scoped lang="scss">

</style>